<template>
  <uv-popup
    ref="settingRef"
    mode="center"
    overlay
    :close-on-click-overlay="false"
    z-index="8"
    :round="20"
    bg-color="none"
  >
    <view class="setting-content">
      <view class="btns">
        <uv-icon size="40rpx" color="#f0f0f0" name="reload" @click="reload" />
        <uv-icon
          size="32rpx"
          color="#f0f0f0"
          name="minus-circle"
          @click="exit"
          style="margin-left: 10rpx"
        />
      </view>
      <view class="setting-title">序列号{{ bindStatus ? "解绑" : "绑定" }}</view>
      <uv-icon
        size="40rpx"
        color="#fff"
        name="close-circle-fill"
        @click="close"
        class="close-btn"
      />
      <uv-form
        ref="editFormRef"
        :model="editForm"
        :rules="rules"
        label-position="left"
        label-width="110rpx"
        :label-style="{ color: '#fff', fontSize: '18rpx' }"
      >
        <uv-form-item label="序列号" prop="serialNumber" border-bottom>
          <uv-input
            v-model="editForm.serialNumber"
            border="none"
            maxlength="50"
            :disabled="bindStatus"
            disabled-color="transparent"
            color="#fff"
            font-size="18rpx"
            clearable
          />
        </uv-form-item>
        <uv-gap height="20" />
        <uv-form-item label="密码" prop="password" border-bottom>
          <uv-input
            v-model="editForm.password"
            password
            border="none"
            maxlength="20"
            font-size="18rpx"
            color="#fff"
            clearable
          />
        </uv-form-item>
        <view class="flex">
          <g-button
            width="200rpx"
            :text="bindStatus ? '解绑' : '绑定'"
            size="20rpx"
            padding="12rpx"
            radius="30rpx"
            @click="handleSubmit"
          />
        </view>
      </uv-form>
    </view>
  </uv-popup>
</template>
<script setup lang="ts">
import { watch, ref } from "vue";
import { bindSerialNumber, unbindSerialNumber } from "@/request/api";
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["update:modelValue", "close"]);

const settingRef = ref(null);
const editFormRef = ref(null);
const bindStatus = ref<any>(false); // 是否绑定
const editForm = ref({
  serialNumber: "", // 序列号
  password: "", // 密码
});
const rules = ref({
  serialNumber: [{ required: true, message: "请输入序列号", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});

// 打开弹窗
const open = () => {
  let serialNumber = uni.getStorageSync("serialNumber");
  if (serialNumber) {
    bindStatus.value = true;
    editForm.value.serialNumber = serialNumber;
  } else {
    bindStatus.value = false;
  }
  settingRef.value.open();
};

// 关闭弹窗
const close = (val?: string = "") => {
  editForm.value = {
    serialNumber: "", // 序列号
    password: "", // 密码
  };
  if (editFormRef.value) {
    // editFormRef.value.resetFields();
  }
  if (settingRef.value) {
    settingRef.value.close();
  }
  emit("update:modelValue", false);
  emit("close", val);
};

// 重启客户端
const reload = () => {
  // #ifdef APP-PLUS
  plus.runtime.restart();
  // #endif
  // #ifdef H5
  uni.reLaunch({ url: "/pages/index/index" });
  // #endif
};

// 退出客户端
const exit = () => {
  // #ifdef APP-PLUS
  plus.runtime.quit();
  // #endif
  // #ifdef H5
  uni.reLaunch({ url: "/pages/index/index" });
  // #endif
};

// 提交表单
const handleSubmit = () => {
  editFormRef.value
    .validate()
    .then((valid: boolean) => {
      let request = bindStatus.value ? unbindSerialNumber : bindSerialNumber;
      request(editForm.value).then((res: any) => {
        console.log(res);
        if (res.code === 200) {
          uni.showToast({
            title: `${bindStatus.value ? "解绑" : "绑定"}成功`,
            icon: "success",
            duration: 2000,
            success: () => {
              setTimeout(() => {
                if (bindStatus.value) {
                  uni.removeStorageSync("serialNumber");
                  uni.removeStorageSync("serialPassword");
                } else {
                  uni.setStorageSync("serialNumber", editForm.value.serialNumber);
                  uni.setStorageSync("serialPassword", editForm.value.password);
                }
                close("y");
              }, 2000);
            },
          });
        }
      });
    })
    .catch(() => {});
};

watch(
  () => props.modelValue,
  (val) => {
    val ? open() : close();
  },
  {
    immediate: true,
  }
);
</script>
<style lang="scss" scoped>
.setting-content {
  width: 375rpx;
  background: #7ba37f;
  padding: 20rpx;
  position: relative;
  .close-btn {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    z-index: 999;
  }
  .setting-title {
    font-size: 20rpx;
    font-weight: 500;
    color: #fff;
    text-align: center;
    margin-bottom: 20rpx;
  }
}
.btns {
  position: absolute;
  left: 20rpx;
  top: 20rpx;
  display: flex;
  align-items: center;
}
.flex {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20rpx;
}
</style>
